<%-- 
    Document   : chats
    Created on : 17 черв 2012, 17:32:55
    Author     : Volodymyr Lavrynovych <volodya.lavrynovych@gmail.com>
--%>

<%@page import="mycompany.helper.ApplicationContentHelper"%>
<%@page contentType="text/html" pageEncoding="UTF-8"%>
<% ApplicationContentHelper helper = new ApplicationContentHelper(request);%>
<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>Chat</title>
        <script type="text/javascript">
            var dialogParams = "height=600px, width=400px, location=no, resizable=no, scrollbars=no, titlebar=no, statusbar=no, menubar=no";
            var $passwordDialog;
            
            $(document).ready(function() {
                $passwordDialog = $("#passwordDialog");
                updateUserCount();
            })
            
            function openChat(url, name){
                try{
                    window.open(url, name, dialogParams);
                } catch (e){
                    alert(e);
                }
            }
            
            function updateUserCount(){
                $.ajax({
                    url: "private/userCount",
                    success: function(result) {
                        $('#userCount').html(result) //shows count
                    },
                    error: function(result){
                        $('#userCount').html(result) //shows count
                    }
                });
            }
            
            function createPrivateChat(){
                $.ajax({
                    url: "private/create",
                    success: function(chatId) {
                        var password = "";
                        openChat("<%=helper.getURL()%>/chats/private/"+chatId+"/?password="+password, "PrivateChatRoom"+chatId);
                    }
                });
            }
            
            function showPasswordDialog(){
                $passwordDialog.find('#password').val('');
                $passwordDialog.modal();
            }
            
            function onOkPasswordModal(){
                var password = $passwordDialog.find('#password').val();
                var chatId = $passwordDialog.attr("chatId");
                var type = $passwordDialog.attr("type");
                openChat("<%=helper.getURL()%>/chats/"+type+"/"+chatId+"/?password="+password, "PrivateChatRoom"+chatId);
                onCancelPasswordModal();
            }
            
            function onCancelPasswordModal(){
                $passwordDialog.modal('hide');
                $passwordDialog.find('#password').val('');
                $passwordDialog.attr("chatId", '');
                $passwordDialog.attr("type", '');
            }
            
            function joinPrivate(){
                var chatId = $('#chatid').val();
                $.ajax({
                    url: "private/"+chatId+"/hasPassword",
                    type: "POST",
                    success: function(result) {
                        var password = "";
                        if(result=='true'){
                            $passwordDialog.attr("chatId", chatId);
                            $passwordDialog.attr("type", "private");
                            showPasswordDialog();
                        } else {
                            openChat("<%=helper.getURL()%>/chats/private/"+chatId+"/?password="+password, "PrivateChatRoom"+chatId);
                        }
                    }
                });
            }
        </script>
    </head>
    <body>
        
        <a class="btn" onclick="updateUserCount()"><i class="icon-refresh"></i></a>
        <span id="userCount"></span>
        
        <div class="row-fluid">
            <div class="span3 well">
                <h1>Private<i class="icon-comment"></i></h1>
                <br/>
                <a href="#" class="thumbnail">
                    <img src="https://encrypted-tbn2.google.com/images?q=tbn:ANd9GcRygwsB5nbuaGGiY3-d0FXU2uu5dHX5_59SiLLRJRbr4YxoYtHT4g" alt="">
                </a>
                <br/>
                <div class="btn-group">
                    <a class="btn btn-primary" onclick="createPrivateChat()"><i class="icon-plus"></i> Create</a>
                    <a class="btn" onclick="createPrivateChat()">with <i class="icon-lock"></i></a>
                </div>
                <hr>
                <div class="btn-group">
                    Please, type chat id:<br/>
                    <a class="btn" onclick="joinPrivate()"><i class="icon-arrow-right"></i> Join</a>
                    <input type="text" class="input-small" id="chatid"/>
                </div>
                
                
            </div>
            <div class="span3 well">
                <h1>Roulette<i class="icon-random"></i></h1>
                <br/>
                <a href="#" class="thumbnail">
                    <img src="https://encrypted-tbn3.google.com/images?q=tbn:ANd9GcSHQyG87BkTr0A3yOJbt1UJPDanj-icIxGvkoM-7nkgAx68V0__6Q" alt="">
                </a>
                
                <br/>
                <a class="btn" onclick="createPrivateChat()"><i class="icon-arrow-right"></i> Join</a><br/>
            </div>
            <div class="span3 well">
                <h1>Public<i class="icon-star-empty"></i></h1>
                <br/>
                <a href="#" class="thumbnail">
                    <img src="https://encrypted-tbn1.google.com/images?q=tbn:ANd9GcT2jsiQNed0b3AAu2ax-0CyMA-wnT7GO7pmKbOWqgwI1J4NFIkJ" alt="">
                </a>
                
                <br/>
                <div class="btn-group">
                    <a class="btn btn-primary" onclick="createPrivateChat()"><i class="icon-plus"></i> Create</a>
                    <a class="btn" onclick="createPrivateChat()">with <i class="icon-lock"></i></a>
                </div>
                <hr>
                <div class="btn-group">
                    <a class="btn" onclick="joinPrivate()"><i class="icon-arrow-right"></i> Join</a>
                    <input type="text" class="input-small" id="chatid"/>
                </div>
            </div>
            <div class="span3 well">
                <h1>My Setting<i class="icon-cog"></i></h1>
            </div>
        </div>
        
        
        <!-- Edit password dialog -->
        <div id="passwordDialog" class="modal hide fade" style="display: table">
            <div class="modal-header">
                <a class="close" data-dismiss="modal">×</a>
                <h3 id="modalTitle">Password</h3>
            </div>

            <div class="modal-body form-horizontal">
                <div class="control-group">
                    <label for="login" class="control-label">Login</label>
                    <div class="controls">
                        <input type="password" id="password">
                        <p class="help-block">Specify minimum 4 symbols</p>
                    </div>
                </div>
            </div>

            <div class="modal-footer">
                <input type="button" class="btn" onclick="onCancelPasswordModal()" value="Cancel"/>
                <input type="button" class="btn btn-primary" onclick="onOkPasswordModal()" value="Ok"/>
            </div>
        </div>
        <!-- End password dialog -->
    </body>
</html>